<template>
  <a-form layout="inline" style="position: relative">
    <a-button v-if="!disabled" type="link" style="position: absolute; right: 0; top: -60px; cursor: pointer" @click="addItem">
      <a-icon type="plus" />
      新增
    </a-button>
    <a-row v-for="(item, idx) in contacts" :key="idx" style="width: 900px; margin: 0 auto">
      <a-col :span="12">
        <a-form-item required label="服务合作起止时间" class="label">
          <a-range-picker
            :value="item.dateRange"
            :disabled="disabled"
            :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
            style="width: 260px"
            @change="onRangeChange($event, idx)"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12" style="position: relative">
        <a-form-item label="新增（首年）/续约" class="label">
          <a-radio-group :value="item.customType" :disabled="disabled" @change="onTypeChange($event, idx)">
            <a-radio value="0">新增客户</a-radio>
            <a-radio value="1">续约客户</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-button v-if="del_visible" type="link" class="mt4" style="position: absolute; right: 0; cursor: pointer" @click="deleteItem(idx)">
          <a-icon type="delete" />
          删除
        </a-button>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import moment from "moment";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    value: {
      type: Array,
      default: () => {}
    },
    companyId: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isRequired: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      contacts: []
    };
  },
  computed: {
    del_visible() {
      if (!this.disabled) {
        if (this.isRequired) {
          if (this.contacts.length > 1) {
            return true;
          }
        } else {
          return true;
        }
      }
      return false;
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (this.companyId && newVal && newVal.length > 0) {
          this.contacts = newVal.map((item) => ({
            dateRange: [moment(item.serverBeginTime), moment(item.serverEndTime)],
            customType: item.isFirst === true ? "0" : "1"
          }));
        }
      },
      immediate: true
    }
  },
  created() {},
  mounted() {
    if (this.isRequired) {
      this.addItem();
    }
  },
  methods: {
    getValues() {
      const lst = this.contacts.map((item) => {
        const newItem = {};
        if (item.dateRange && item.dateRange.length > 0) {
          const dates = item.dateRange.map((item) => item.format("YYYY-MM-DD"));
          newItem["serverBeginTime"] = dates[0];
          newItem["serverEndTime"] = dates[1];
        } else {
          return false;
        }
        newItem["isFirst"] = item.customType === "0";
        if (this.companyId) {
          newItem["companyId"] = this.companyId;
        }
        return newItem;
      });
      const lstFalse = lst.filter((item) => !item);
      if (lstFalse.length > 0) {
        this.$message.warning("服务合作起止时间");
        return false;
      } else {
        return lst;
      }
    },
    addItem() {
      this.contacts = [
        ...this.contacts,
        {
          dateRange: null,
          customType: "1"
        }
      ];
    },
    deleteItem(idx) {
      const temp = [...this.contacts];
      temp.splice(idx, 1);
      this.contacts = temp;
    },
    onRangeChange(dates, idx) {
      const temp = [...this.contacts];
      temp[idx].dateRange = dates;
      this.contacts = temp;
    },
    onTypeChange(e, idx) {
      const val = e.target.value;
      const temp = [...this.contacts];
      temp[idx].customType = val;
      this.contacts = temp;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .label > .ant-form-item-label {
  width: 150px;
  text-align: right;
}
</style>
